<template>
    <layoutNav>
        <div class="navbar">
            <iconNav class="lefticon"  name="left" @click="goBack"></iconNav>
            <span class="title">编辑标签</span>
            <span class="righticon"></span>
        </div>
        <div class="note-wrapper">
            <notes  :value="tag.name" 
                    @update:value="updateTag"
                    fieldName="编辑" 
                    placeHolder="编辑你的标签" 
                    />
        </div>
        <div class="button-wrapper">
            <Button @click="remove(tag.id)">删除标签</Button>
        </div>
        
    </layoutNav>
</template>

<script lang="ts">
import Vue from 'vue' 
import { Component } from 'vue-property-decorator';
import layoutNav from '@/components/layoutNav.vue';
import iconNav from '@/components/iconNav.vue';
import notes from '../components/money/notes.vue';
import Button from '@/components/Button.vue';

@Component({
    components: {notes,Button}
})
export default class EditLabels extends Vue {
    get tag(){
        return this.$store.state.currentTag
    }
    created() {
        const id = this.$route.params.id
        this.$store.commit('fetchTags');
        this.$store.commit('setCurrentTag',id)
        if (!this.tag) {
        this.$router.replace('/404');
      } else {
      }
    }
    updateTag(name: string){
        if(this.tag.id){
            this.$store.commit('updateTag',{id:this.tag.id,name})  
        }
    }
    remove(id:string){       
        if(id){
            this.$store.commit('removeTag',id)
        }else {
            alert('删除失败')
        }
    }
    goBack(){
        this.$router.back()
    }
}
</script>

<style lang="scss" scoped>
    .navbar {
        text-align: center;
        font-size: 16px;
        padding: 12px 16px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .lefticon {
            width: 24px;
            height: 24px;
        }
        > .righticon {
            width: 24px;
            height: 24px;
        }
    }
    .note-wrapper{
    background: white;
    margin-top: 8px;
  }
  .button-wrapper{
    text-align: center;
    padding: 16px;
    margin-top: 44-16px;
  }
</style>